<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>哑目连 - 传承保护</title>
  <link rel="stylesheet" href="css/style.css"/>
</head>
<body>

  <!-- 导航栏 -->
  <header class="site-header">
    <!-- 导航装饰可放在LOGO左侧或背景图中 -->
    <div class="nav-decoration"></div>
    
    <div class="nav-inner">
      <!-- 若有图形LOGO，用 <img>，这里简化成文字LOGO或带小图标 -->
      <div class="site-logo">
        <img src="assets/images/logo_yamulian.png" alt="哑目连LOGO" class="logo-img" />
        <span class="logo-text">上虞·哑目连</span>
      </div>
  
      <!-- 导航菜单 -->
      <nav class="site-nav">
        <ul>
          <li><a href="index.html" class="nav-link">首页</a></li>
          <li><a href="origin.html" class="nav-link">历史渊源</a></li>
          <li><a href="scenes.html" class="nav-link">表演场景</a></li>
          <li><a href="inherit.html" class="nav-link">传承保护</a></li>
          <li><a href="thanks.html" class="nav-link">致谢</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- 主体内容 -->
  <main class="main-content">
    <section>
      <h2>传承与保护</h2>
      <p>
        随着社会的发展和现代审美的变化，哑目连的演出舞台与观众群体都逐渐减少，老艺人相继离世，年轻一代尚未完全接力，亟待保护和传承。上虞当地政府及高校开展了一系列举措，包括戏剧复排、非遗进校园、专题视频记录等，使哑目连在新时代的公共文化环境中焕发新活力。
      </p>
    </section>

    <!-- 视频示例（本地或第三方链接） -->
    <section>
      <h2>采访视频</h2>
      <video controls width="100%">
        <source src="assets/videos/interview.mp4" type="video/mp4" />
        您的浏览器不支持HTML5视频
      </video>
    </section>

    <!-- 折叠面板（FAQ示例） -->
    <section>
      <h2>常见问题</h2>
      <div class="accordion-item">
        <button class="accordion-header">哑目连起源与目连戏的关系？</button>
        <div class="accordion-content">
          <p>哑目连与目连戏同源于盂兰盆经“目连救母”的故事，哑目连则以无唱词的形态演绎，更注重表情动作的表现力。</p>
        </div>
      </div>
      <div class="accordion-item">
        <button class="accordion-header">哑目连现在还有定期演出吗？</button>
        <div class="accordion-content">
          <p>目前在上虞地区，仍有少量戏班会在农历七月半或白事场合进行表演，但频次不多，需要提前查询当地文化部门信息。</p>
        </div>
      </div>
      <div class="accordion-item">
        <button class="accordion-header">如何参与哑目连的传承学习？</button>
        <div class="accordion-content">
          <p>可通过上虞区的非遗保护中心或高校相关项目了解具体报名方式，或者联系民间艺人拜师学艺。</p>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="site-footer">
    <p>© 2025 上虞哑目连专题网站 | 传承保护</p>
  </footer>

  <!-- 引入交互脚本 -->
  <script src="js/script.js"></script>
</body>
</html>
